<div cdkDrag cdkDragHandle
	 cdkDragRootElement=".cdk-overlay-pane"
	 mat-dialog-title>
	<h4>
		Stats of {{ server.name }}
	</h4>

	<mat-button-toggle-group
		(change)="refreshData()"
		[(ngModel)]="mode"
		appearance="legacy"
		style="font-size: 13px">
		<mat-button-toggle value="raw">
			Total
		</mat-button-toggle>
		<mat-button-toggle value="sinceOpen">
			Relative
		</mat-button-toggle>
		<mat-button-toggle value="difference">
			Instant
		</mat-button-toggle>
	</mat-button-toggle-group>

	<div *ngIf="chart && chart.chart">
		<button (click)="pause = !pause"
				mat-icon-button>
			<span class="material-symbols-outlined notranslate">
				{{ pause ? 'play_circle' : 'pause_circle' }}
			</span>
		</button>
		<button
			(click)="chart.chart.resetZoom()"
			*ngIf="chart.chart.getZoomLevel() > 1"
			mat-icon-button>
			<span class="material-symbols-outlined">
				zoom_out
			</span>
		</button>
		<button
			(click)="switchAll()"
			mat-icon-button>
			<span class="material-symbols-outlined">
				toggle_on
			</span>
		</button>
	</div>

	<button aria-label="close dialog" mat-dialog-close mat-icon-button>
		<span class="material-symbols-outlined notranslate">close</span>
	</button>
</div>
<div mat-dialog-content>
	<canvas
		[datasets]="datasets"
		[labels]="labels"
		[options]="lineChartOptions"
		[type]="'line'"
		baseChart>
	</canvas>
</div>

